// components/share-poster/share-poster.js
import Poster from "xcx-poster-canvas/Poster";
import Toast from "@vant/weapp/toast/toast";
import {authorization} from "../../utils/Util"
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        show: { //是否展示分享按钮
            type: Boolean,
            value: false
        },
        name: { //生成图片的名称
            type: String,
            value: "default"
        },
        config: { //配置
            type: Object,
            value: {}
        },
        loading: { //是否显示加载状态
            type: Object,
            value: false
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        _config: {},
        _saveImageUrl: {},  //保存路径
        _posterPop: {
            show: false, //显示分享朋友圈海报
            url: ""  //当前展示路径
        }
    },

    /*
    * 监听
    * */
    observers: {
        "config": function (value) {
            this._createPoster(value);
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        /*
        * 点击分享
        * */
        onShareClose: function () {
            this.setData({show: false})
        },
        onGridClick: async function (e) {
            let tagName = e.currentTarget.dataset.name;
            tagName === "sharePyq" ? this.triggerEvent("clickPyqBtn", {}, {}) : null
        },
        _createPoster: function (data) { //检测是否存在生成路径
            const that = this;
            let name = that.data.name;
            let config = data || that.data.config;
            let saveImageUrl = that.data._saveImageUrl;
            if (Object.keys(config).length > 0) {
                if (saveImageUrl[name]) {
                    that.triggerEvent("sharePoster", {
                        success: true,
                        result: saveImageUrl[name],
                        name: name
                    }, {});
                    that._showPoster(saveImageUrl[name]);
                } else {
                    that.data.loading ? Toast.loading({
                        mask: true,
                        context: that,
                        message: "海报生成中...",
                        selector: "#van-toast_poster"
                    }) : null;
                    Poster.create(config, that).then(function (res) {
                        let name = that.data.name;
                        that.data._saveImageUrl[name] = res;
                        that._showPoster(res);
                        that.triggerEvent("sharePoster", {
                            success: true,
                            result: res,
                            name: name
                        }, {});
                        that.data.loading ? Toast.clear() : null
                    }).catch(function () {
                        let name = that.data.name;
                        that.triggerEvent("sharePoster", {
                            success: false,
                            result: {},
                            name: name
                        }, {});
                        that.data.loading ? Toast.fail({
                            mask: true,
                            context: that,
                            message: "生成海报失败",
                            selector: "#van-toast_poster"
                        }) : null;
                    })
                }
            }
        },
        _showPoster: function (url) { //展示内容
            if (this.data.name === "default") {
                this.setData({
                    _posterPop: {
                        show: true,
                        url: url
                    },
                    show: false
                })
            }
        },

        /*
        * 海报展示组件
        * */
        onPosterPopClose: function (e) {
            this.setData({"_posterPop.show": false})
        },
        onPosterPopSave: async function () {
            try {
                const that = this;
                if (await authorization("scope.writePhotosAlbum")) {
                    wx.saveImageToPhotosAlbum({
                        filePath: that.data._posterPop.url,
                        success: function (res) {
                            that.setData({"_posterPop.show": false});
                            Toast.success({
                                mask: true,
                                context: that,
                                message: "保存成功",
                                selector: "#van-toast_poster"
                            });
                        }
                    })
                };
            } catch (e) {
                console.error(e)
            }
        }
    }
})
